<template>
  <div v-if="loadingFlag" class="goodsDetailLoading">
    <van-loading class="loading-box" type="spinner" color="#fe6018" vertical>加载中</van-loading>
  </div>

  <van-pull-refresh
    v-else
    id="container"
    class="agent-refresh"
    v-model="isRefresh"
    @refresh="onRefresh"
  >
    <div class="container" :class="{'noTip-container' : recordList.length<=0}">
      <div v-if="recordList.length>0" class="record-items">
        <div class="item" v-for="(item,index) in recordList" :key="index">
          <div class="time">{{item.agent_time | parseTime}}</div>
          <div class="agent-info">
            <div class="info-item">
              <p>代理商</p>
              <p>{{item.agent_phone}}</p>
            </div>
            <div class="info-item">
              <p>代理份数</p>
              <p>{{item.agent_copies+'份'}}</p>
            </div>
            <div class="info-item">
              <p>代理订金</p>
              <p>{{item.agent_deposit+'元'}}</p>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="noTip">
        <p>暂无代理记录</p>
      </div>
    </div>
  </van-pull-refresh>
</template>

<script>
import { getAgentRecord } from "@/api/agency";
import { parseTime } from "@/utils";
export default {
  data() {
    return {
      loadingFlag: false,
      isRefresh: false,
      reqParams: {
        product_id: ""
      },
      recordList: []
    };
  },
  created() {
    if (localStorage.getItem("recordList")) {
      this.recordList = JSON.parse(localStorage.getItem("recordList"));
    } else {
      this.loadingFlag = true;
      this.reqParams.product_id = this.$route.query.id;
      console.log("请求详情参数", this.reqParams);
      this._getAgentRecord();
    }
  },
  methods: {
    // 请求代理记录
    _getAgentRecord() {
      getAgentRecord(this.reqParams)
        .then(res => {
          if (res.code == 1 && res.data.list) {
            this.recordList = res.data.list;
            console.log("代理记录", this.recordList);
            let reg = /^(\d{3})\d+(\d{4})$/;
            for (let i = 0; i < this.recordList.length; i++) {
              this.recordList[i].agent_phone = this.recordList[
                i
              ].agent_phone.replace(reg, "$1****$2");
            }
            localStorage.setItem("recordList", JSON.stringify(this.recordList));
          }
        })
        .finally(() => {
          this.loadingFlag = false;
          this.isRefresh = false;
        });
    },
    // 下拉刷新
    onRefresh() {
      this._getAgentRecord();
    }
  }
};
</script>

<style lang='scss' scoped>
.goodsDetailLoading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container {
  width: 100vw;
  min-height: 100vh;
  background-color: #f7f7f7;
  &.noTip-container {
    background: #fff;
    .noTip {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #999;
    }
  }

  > .record-items {
    .item {
      background-color: #fff;
      padding: 32px 26px 34px 30px;
      &:nth-of-type(2n) {
        background-color: #f7f7f7;
      }
      > .time {
        font-size: 24px;
        font-weight: 400;
        text-align: left;
        color: rgba(17, 17, 17, 1);
        line-height: 36px;
        margin-bottom: 20px;
      }
      > .agent-info {
        display: flex;
        justify-content: space-between;
        > .info-item {
          text-align: right;
          > p {
            font-size: 26px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            margin-bottom: 24px;
            &:last-of-type {
              margin: 0;
              color: #111111;
            }
          }
          &:nth-of-type(1) {
            text-align: left;
          }
          &:nth-of-type(2) {
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
